<template>
  <div class="app-container order-container">
    <div class="content-box">
      <div class="nav_tab-content">
        <div
          class="tab-item"
          :class="nowStatus == -1 ? 'tab-on' : ''"
          @click="nowStatus = -1"
        >
          全部订单
        </div>
        <div
          v-for="(item, key) in querydata.orderStatusList"
          :key="key"
          class="tab-item"
          :class="nowStatus == key ? 'tab-on' : ''"
          @click="nowStatus = key"
        >
          {{ item }}
        </div>
      </div>
      <el-form
        v-show="showSearch"
        ref="queryForm"
        :model="queryParams"
        :inline="true"
        class="sreach-form-content"
        label-width="100px"
      >
        <el-form-item label="订单号" prop="order_sn">
          <el-input
            v-model="queryParams.order_sn"
            placeholder="请输入"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="商品编码" prop="goods_sn">
          <el-input
            v-model="queryParams.goods_sn"
            placeholder="请输入"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="规格编码" prop="sku_sn">
          <el-input
            v-model="queryParams.sku_sn"
            placeholder="请输入"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="条形码" prop="bar_code">
          <el-input
            v-model="queryParams.bar_code"
            placeholder="请输入"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="商品标题" prop="goods_title">
          <el-input
            v-model="queryParams.goods_title"
            placeholder="请输入"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="收货人" prop="contacts">
          <el-input
            v-model="queryParams.contacts"
            placeholder="请输入"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="queryParams.mobile"
            placeholder="请输入"
            clearable
            size="small"
            @keyup.enter.native="handleQuery"
          />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select
            v-model="queryParams.status"
            placeholder="请选择"
            clearable
            size="small"
          >
            <el-option label="所有" value="" />
            <el-option
              v-for="(item, key) in querydata.status"
              :key="key"
              :label="item"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="退款状态" prop="refund_status">
          <el-select
            v-model="queryParams.refund_status"
            placeholder="请选择"
            clearable
            size="small"
          >
            <el-option label="所有" value="" />
            <el-option
              v-for="(item, key) in querydata.refund_status"
              :key="key"
              :label="item"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <!--  <el-form-item label="仓库类型" prop="warehouse_type_id">
          <el-select
            v-model="queryParams.warehouse_type_id"
            placeholder="请选择"
            clearable
            size="small"
          >
            <el-option label="所有" value="" />
            <el-option
              v-for="(item, key) in querydata.warehouse_type"
              :key="key"
              :label="item"
              :value="key"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="海关状态" prop="customs_status">
          <el-select
            v-model="queryParams.customs_status"
            placeholder="请选择"
            clearable
            size="small"
          >
            <el-option label="所有" value="" />
            <el-option
              v-for="(item, key) in querydata.customs_status_array"
              :key="key"
              :label="item"
              :value="key"
            />
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="订单金额" prop="pay_pricearr">
          <el-col :span="11">
            <el-input
              v-model="queryParams.pay_pricearr[0]"
              placeholder="请输入"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-col>
          <el-col style="text-align: center" class="line" :span="2">-</el-col>
          <el-col :span="11">
            <el-input
              v-model="queryParams.pay_pricearr[1]"
              placeholder="请输入"
              clearable
              size="small"
              @keyup.enter.native="handleQuery"
            />
          </el-col>
        </el-form-item> -->
        <el-form-item
          label="创建时间开始"
          prop="createtimearr"
          class="date_picker_content"
        >
          <el-date-picker
            v-model="queryParams.createtimearr"
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>
        <el-form-item
          label="更新时间"
          prop="updateTimearr"
          class="date_picker_content"
        >
          <el-date-picker
            v-model="queryParams.updateTimearr"
            size="small"
            value-format="yyyy-MM-dd HH:mm:ss"
            type="datetimerange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="['00:00:00', '23:59:59']"
          />
        </el-form-item>
        <el-form-item>
          <el-button
            type="primary"
            icon="el-icon-search"
            size="mini"
            @click="handleQuery"
            >搜索</el-button
          >
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
            >重置</el-button
          >
        </el-form-item>
      </el-form>

      <!-- <el-row :gutter="10" class="mb8">
        <el-col :span="1.5">
          <el-button
            type="primary"
            plain
            icon="el-icon-plus"
            size="mini"
            @click="handleExport"
            >导出</el-button
          >
        </el-col>
        <el-col :span="1.5">
          <el-button size="mini" plain type="info"
            >订单总金额：￥{{ totalPrice }} 当页总金额：￥{{
              pagePrice
            }}</el-button
          >
        </el-col>
        <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
      </el-row> -->

      <el-table
        :data="list"
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="expand">
          <template slot-scope="props">
            <el-table
              :data="props.row.goods"
              row-key="goods_sn"
              :show-header="false"
              :span-method="
                ({ row, column, rowIndex, columnIndex }) => {
                  return objectSpanMethod(
                    { row, column, rowIndex, columnIndex },
                    props.$index
                  );
                }
              "
              @selection-change="handleSelectionChange2($event, props.$index)"
            >
              <el-table-column type="selection" width="50" />
              <el-table-column width="80">
                <template slot-scope="goods">
                  <el-image
                    class="good_img"
                    :src="goods.row.goods_info.goods_image"
                    :preview-src-list="[goods.row.goods_info.goods_image]"
                  >
                  </el-image>
                </template>
              </el-table-column>
              <el-table-column>
                <template slot-scope="goods">
                  <div>{{ goods.row.goods_info.goods_name }}</div>
                  <div>{{ goods.row.goods_info.goods_sn }}</div>
                </template>
              </el-table-column>
              <el-table-column width="200px">
                <template slot-scope="goods">
                  <div>￥{{ goods.row.price }} x{{ goods.row.cart_num }}</div>
                </template>
              </el-table-column>
              <el-table-column width="100px">
                <template slot-scope="goods">
                  ￥{{ goods.row.goods_price }}
                </template>
              </el-table-column>

              <el-table-column label="操作" align="center" width="100">
                <!-- <template>
                  <el-button
                    v-if="
                      props.row.status == 1 && props.row.warehouse_type_id == 1
                    "
                    type="text"
                    size="small"
                    @click="handleSplitOrder(props.$index)"
                    >拆单</el-button
                  >
                </template> -->
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="toInfo(scope.row.id)"
                    >订单详情</el-button
                  >
                  <el-button
                    v-if="
                      scope.row.status == 1 && scope.row.warehouse_type_id == 1
                    "
                    type="text"
                    size="small"
                    @click="handleSendOrder(scope.row.id, scope.row.order_sn)"
                    >发货</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="handleRemark(scope.row.id)"
                    >备注</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
            <div class="mb8" />
            <!-- <el-table
              v-if="props.row.sub.length > 0"
              :data="props.row.sub"
              :show-header="false"
              class="smallorder"
            >
              <el-table-column type="expand">
                <template slot-scope="subprops">
                  <el-table
                    :data="subprops.row.goods"
                    row-key="goods_sn"
                    :show-header="false"
                  >
                    <el-table-column width="50" />
                    <el-table-column width="80">
                      <template slot-scope="goods">
                        <el-image
                          class="good_img"
                          :src="goods.row.goods_info.goods_image"
                          :preview-src-list="[goods.row.goods_info.goods_image]"
                        >
                        </el-image>
                      </template>
                    </el-table-column>
                    <el-table-column>
                      <template slot-scope="goods">
                        <div>{{ goods.row.goods_info.goods_name }}</div>
                        <div>{{ goods.row.goods_info.goods_sn }}</div>
                      </template>
                    </el-table-column>
                    <el-table-column width="200px">
                      <template slot-scope="goods">
                        <div>
                          ￥{{ goods.row.price }} x{{ goods.row.cart_num }}
                        </div>
                      </template>
                    </el-table-column>
                    <el-table-column width="100px">
                      <template slot-scope="goods">
                        ￥{{ goods.row.goods_price }}
                      </template>
                    </el-table-column>
                    <el-table-column label="操作" align="center" width="100" />
                  </el-table>
                </template>
              </el-table-column>
              <el-table-column label="ID" prop="id" width="50" />
              <el-table-column label="子订单号" prop="order_sn" width="200px">
                <template slot-scope="scope">
                  <div>子订单号</div>
                  <div>{{ scope.row.order_sn }}</div>
                </template>
              </el-table-column>
              <el-table-column width="200px">
                <template slot-scope="scope">
                  <div>{{ scope.row.channel_name }}</div>
                  <div>{{ scope.row.warehouse_text }}</div>
                </template>
              </el-table-column>
              <el-table-column label="订单金额" width="80px">
                <template slot-scope="scope">
                  <div>{{ scope.row.pay_way }}</div>
                  <div>{{ scope.row.pay_price }}</div>
                </template>
              </el-table-column>
              <el-table-column label="下单用户" prop="contacts" />
              <el-table-column label="物流信息">
                <template slot-scope="scope">
                  <div>{{ scope.row.logistics_name }}</div>
                  <div>{{ scope.row.express_code }}</div>
                </template>
              </el-table-column>
              <el-table-column prop="customs_status_text" label="海关状态">
              </el-table-column>
              <el-table-column
                label="订单状态"
                prop="order_status_text"
                width="100px"
              />
              <el-table-column label="订单备注" prop="remark" />
              <el-table-column label="操作" align="center" width="100">
                <template slot-scope="scope">
                  <el-button
                    type="text"
                    size="small"
                    @click="toInfo(scope.row.id)"
                    >订单详情</el-button
                  >
                  <el-button
                    v-if="
                      scope.row.status == 1 && scope.row.warehouse_type_id == 1
                    "
                    type="text"
                    size="small"
                    @click="handleSendOrder(scope.row.id, scope.row.order_sn)"
                    >发货</el-button
                  >
                  <el-button
                    type="text"
                    size="small"
                    @click="handleRemark(scope.row.id)"
                    >备注</el-button
                  >
                </template>
              </el-table-column>
            </el-table> -->
          </template>
        </el-table-column>

        <el-table-column type="selection" width="50" />
        <el-table-column label="ID" prop="id" width="50" />
        <el-table-column label="订单号" prop="order_sn" width="200px"  align="center"/>
        <el-table-column label="收货人" prop="contacts" align="center"/>
        <el-table-column label="订单状态" prop="status_text" align="center">
        </el-table-column>
        <el-table-column label="手机号" prop="mobile"  align="center" />
        <el-table-column label="时间" width="220"  align="center" >
          <template slot-scope="scope">
            <p>下单时间：{{ scope.row.createtime }}</p>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center" width="200">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="toInfo(scope.row.id)"
              >订单详情</el-button
            >
            <el-button
              v-if="scope.row.status == 1 "
              type="text"
              size="small"
              @click="handleSendOrder(scope.row.id, scope.row.order_sn)"
              >发货</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleRemark(scope.row.id)"
              >备注</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <pagination
        v-show="totalSize > 0"
        :total="totalSize"
        :page.sync="queryParams.page"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>
    <!-- 发货 -->
    <el-dialog :title="title" :visible.sync="open" width="400px" append-to-body>
      <el-form ref="form" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="快递单号" prop="express_code">
          <el-input
            v-model="form.express_code"
            style="width: 200px"
            placeholder="请输入快递单号"
            size="small"
          />
        </el-form-item>
        <el-form-item label="快递公司" prop="logistics_index">
          <el-select
            v-model="form.logistics_index"
            placeholder="请选择"
            clearable
            size="small"
          >
            <el-option
              v-for="(item, key) in querydata.logisticsList"
              :key="key"
              :label="item.name"
              :value="key"
            />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" style="text-align: center" class="dialog-footer">
        <el-button type="primary" @click="handleSubmitSendMsg">提 交</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import pagination from "@/components/Pagination";
import { listorder, yinseSearch } from "@/api/orderlist";

export default {
  name: "Order",
  components: {
    pagination,
  },
  data() {
    return {
      // 遮罩层
      loading: true,
      // 显示搜索条件
      showSearch: true,
      nowStatus: -1,
      ids: [],
      all_ids: [],
      // 选中拆单数组
      goods_ids: [],
      list: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        page: 1,
        pageSize: 10,
        order_sn: "",
        order_id: "",
        contacts: "",
        mobile: "",
        status: "",
        goods_sn: "",
        sku_sn: "",
        refund_status: "",
        bar_code: "",
        goods_title: "",
        createtimearr: ["", ""],
        updateTimearr: ["", ""],
        start_createtime: "",
        end_createtime: "",
        start_updatetime: "",
        end_updatetime: "",
      },
      totalSize: 0,
      // pagePrice: "",
      // totalPrice: "",
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        id: [{ required: true, message: "订单ID不能为空", trigger: "blur" }],
        express_code: [
          { required: true, message: "	快递单号不能为空", trigger: "blur" },
        ],
        logistics_index: [
          { required: true, message: "物流公司不能为空", trigger: "blur" },
        ],
      },
      activeName: "first",
      order_create: "",
      popSty: false,
      textarea: "",
      querydata: {},
    };
  },
  watch: {
    "queryParams.createtimearr"(value) {
      if (value.length && value[0] == "") {
        return;
      }
      this.queryParams.start_createtime = value[0];
      this.queryParams.end_createtime = value[1];
    },
    "queryParams.updateTimearr"(value) {
      if (value.length && value[0] == "") {
        return;
      }
      this.queryParams.start_updatetime = value[0];
      this.queryParams.end_updatetime = value[1];
    },
    nowStatus() {
      this.resetQuery();
      this.getList();
    },
  },
  created() {
    this.yinseSearch();
    this.getList();
  },
  methods: {
    toInfo(id) {
      this.$router.push({
        path: "/orderManagement/orderDateil/" + id,
      });
    },
    /** 查询菜单列表 */
    getList() {
      this.loading = false;
      const queryParams = { ...this.queryParams };
      delete queryParams.pay_pricearr;
      delete queryParams.createtimearr;
      delete queryParams.updateTimearr;
      queryParams.status = this.nowStatus != -1 ? this.nowStatus : "";
      listorder(queryParams).then((response) => {
        this.list = response.data.list;
        this.totalSize = response.data.total_page;
        // this.pagePrice = response.data.pagePrice;
        // this.totalPrice = response.data.totalPrice;
        this.loading = false;
      });
    },
    // 获取映射
    yinseSearch() {
      yinseSearch().then((response) => {
        this.querydata = response.data;
      });
    },
    /** 转换菜单数据结构 */
    normalizer(node) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.menuId,
        label: node.menuName,
        children: node.children,
      };
    },
    // 菜单状态字典翻译
    statusFormat(row, column) {
      if (row.menuType == "F") {
        return "";
      }
      return this.selectDictLabel(this.statusOptions, row.status);
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: undefined,
        express_code: undefined,
        logistics_index: undefined,
      };
      this.resetForm("form");
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.page = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.queryParams.start_createtime = "";
      this.queryParams.end_createtime = "";
      this.queryParams.start_updatetime = "";
      this.queryParams.end_updatetime = "";
      this.handleQuery();
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      this.$confirm('是否确认删除名称为"' + row.id + '"的数据项?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delMenu(row.menuId);
        })
        .then(() => {
          this.getList();
          this.msgSuccess("删除成功");
        });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    renderHeader(h, { column }) {
      const header = column.label.split(",");
      return [h("div", [h("div", {}, header[0]), h("span", {}, header[1])])];
    },
    handleRemark(id) {
      this.$prompt("请输入备注", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        inputPattern: /.{1}|^\s*$/g,
        inputErrorMessage: "请填写至少一个不为空的字符",
      })
        .then(({ value }) => {
          remarkOrder({ remark: value, id: id }).then((response) => {
            this.getList();
            this.msgSuccess("操作成功");
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "取消输入",
          });
        });
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      const all_ids = [];
      const ids = [];
      selection.map((item) => {
        all_ids.push(item.id);
        ids.push(item.id);
        item.sub.map((subitem) => {
          all_ids.push(subitem.id);
        });
      });
      this.ids = ids;
      this.all_ids = all_ids;
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    handleSelectionChange2(selection, index) {
      const ids = selection.map((item) => item.cart_info_id);
      this.goods_ids[index] = ids;
    },
    handleSplitOrder(index) {
      if (!this.goods_ids[index] || this.goods_ids[index].length <= 0) {
        this.msgError("请选择要拆分的商品");
        return;
      }
      console.log({
        order_id: this.list[index].id,
        cart_ids: this.goods_ids[index].join(","),
      });
      splitOrder({
        order_id: this.list[index].id,
        cart_ids: this.goods_ids[index].join(","),
      }).then((response) => {
        this.msgSuccess("拆单成功");
        this.getList();
      });
    },
    objectSpanMethod({ row, column, rowIndex, columnIndex }, index) {
      if (columnIndex === 5) {
        if (rowIndex == 0) {
          return {
            rowspan: this.list[index].goods.length,
            colspan: 1,
          };
        } else {
          return {
            rowspan: 0,
            colspan: 0,
          };
        }
      }
    },
    handleSubmitSendMsg() {
      this.$refs["form"].validate((valid) => {
        if (valid) {
          const { id, express_code, logistics_index } = { ...this.form };
          sendOrder({
            id,
            express_code,
            logistics_name: this.querydata.logisticsList[logistics_index].name,
            logistics_code: this.querydata.logisticsList[logistics_index].code,
          }).then(() => {
            this.msgSuccess("发货成功");
            this.cancel();
            this.getList();
          });
        }
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    handleSendOrder(id, order_sn) {
      this.reset();
      this.form.id = id;
      this.open = true;
      this.title = `${order_sn}  发货`;
    },
    handleExport() {
      const queryParams = { ...this.queryParams };
      delete queryParams.pay_pricearr;
      delete queryParams.createtimearr;
      queryParams.ids = this.all_ids.join(",");
      this.$confirm("确定导出订单?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          window.open(
            process.env.VUE_APP_BASE_API +
              "order/export?" +
              this.encodeSearchParams(queryParams)
          );
        })
        .catch(() => {});
    },
    encodeSearchParams(obj) {
      const params = [];
      Object.keys(obj).forEach((key) => {
        let value = obj[key];
        if (typeof value === "undefined") {
          value = "";
        }
        params.push([key, encodeURIComponent(value)].join("="));
      });
      return params.join("&");
    },
    handlePushOrder(id) {
      pushOrder({ id: id }).then((response) => {
        this.getList();
        this.msgSuccess("操作成功");
      });
    },
    handlePushPayOrder(id) {
      pushPayOrder({ id: id }).then((response) => {
        this.getList();
        this.msgSuccess("操作成功");
      });
    },
  },
};
</script>
<style lang="scss">
.order-container {
  .goods_table {
    background: #fafafa;
  }
  .sreach-form-content {
    .el-form-item__content {
      width: 200px;
    }
    .date_picker_content {
      .el-form-item__content {
        width: unset;
      }
    }
  }
  .el-table tbody tr:hover > td {
    background-color: unset !important;
    &.el-table__expanded-cell {
      background-color: #f3f3f3 !important;
    }
  }
  .el-table__expanded-cell:hover {
    background-color: #f3f3f3 !important;
  }
  .el-table__expanded-cell[class*="cell"] {
    background: #f3f3f3;
  }
  .el-table__expanded-cell[class*="cell"] {
    padding: 8px 0 8px 50px;
  }
  .smallorder {
    .el-table__expanded-cell[class*="cell"] {
      padding: 0;
    }
  }
  .nav_tab-content {
    overflow: hidden;
    margin-bottom: 30px;
    .tab-item {
      float: left;
      font-size: 14px;
      margin-right: 20px;
      cursor: pointer;
      color: #22222a;
      &.tab-on {
        color: #0766fe;
        font-weight: bold;
      }
    }
    &::after {
      clear: both;
      content: "";
    }
  }
}
</style>
<style lang="scss"  scoped>
img {
  width: 100%;
}
.hint_pr {
  padding-left: 10vh;
}
.imgSty {
  width: 80px;
  display: block;
}
.mesSty {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mesSty .price_num {
  flex-shrink: 0;
  margin-left: 10px;
}
.mesSty .order_goods {
  display: flex;
  align-items: center;
}

.pb_sty span {
  background: #1dc8de;
  padding: 2px 8px;
  border-radius: 4px;
  color: #fff;
}

.mesFont p {
  margin-block-start: 0;
  margin-block-end: 0;
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.mesFont p:nth-child(2) {
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
}
.iconSty {
  float: right;
  cursor: pointer;
}

.el-form--inline .el-form-item__content {
  display: block;
}

.el-table tr {
  position: relative;
  width: 100%;
  background: linear-gradient(#dcdfe6, #dcdfe6 40px, #fff 41px, #ffffff 100%);
}
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background: linear-gradient(
    #dcdfe6,
    #dcdfe6 40px,
    #f5f7fa 41px,
    #f5f7fa 100%
  );
}
.cell {
  padding-top: 3%;
}
.order_item {
  width: 500%;
  position: absolute;
  top: 0;
  left: -55px;
  z-index: 1;
  height: 40px;
  line-height: 40px;
  background: #ccc;
}
</style>
